<script setup>
import { q, useObject, definePageMeta } from "#imports";
definePageMeta({
  permission: "user.update"
});
const { data: obj } = await useObject({
  username: true,
  first_name: true,
  last_name: true,
  email: true,
  phone: true,
  addr1: true,
  addr2: true,
  addr3: true,
  join_date: true,
  expiry_date: true,
  status: true,
  language: true,
  default_page: true
});
const options = [
  { label: "Active", value: 0 },
  { label: "Inactive", value: 1 }
];
const tt = await q({
  app: {
    languages: true
  }
});
const languages = tt.app.languages.map((lang) => {
  return {
    label: lang.name,
    value: lang.value
  };
});
</script>

<template>
    <l-page>
        <FormKit type="l-form" :value="obj" gutter="none">
            <l-row class="col col-12">
                <l-col md="6">
                    <FormKit type="l-input" label="Username" name="username" validation="required" />
                    <FormKit type="l-input" label="First name" name="first_name" validation="required" />
                    <FormKit type="l-input" label="Last name" name="last_name" />
                    <FormKit type="l-input" label="Email" name="email" validation="required|email" />
                </l-col>

                <l-col md="6">
                    <FormKit type="l-input" label="Phone" name="phone" />
                    <FormKit type="l-input" label="Address1" name="addr1" />
                    <FormKit type="l-input" label="Address2" name="addr2" />
                    <FormKit type="l-input" label="Address3" name="addr3" />
                </l-col>

                <l-col>
                    <FormKit type="l-date-picker" label="Join date" name="join_date" validation="required" />
                    <FormKit type="l-date-picker" label="Expiry date" name="expiry_date" />
                    <FormKit type="l-select" label="Status" name="status" :options="options" validation="required" />
                    <FormKit type="l-select" label="Language" name="language" :options="languages"
                        validation="required" />
                    <FormKit type="l-input" label="Default page" name="default_page" />
                </l-col>
            </l-row>
        </FormKit>
    </l-page>
</template>
